<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="font/css/font-awesome.min.css">
	<link rel="stylesheet" href="base.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="bootstrap.min.js"></script>
	<script src="base.js"></script>
</head>
<body>
	<!-- 头部开始 -->
	<div class="top">
		<div class="container">
			<nav class="navbar navbar-default top-menu navbar-fixed-top">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">Projects</a></li>
							<li><a href="#">About</a></li>
							<li><a href="#">Blog</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>
	</div>
	<!-- 头部结束 -->
	<!-- 头部下面的标题与图片 -->
	<div class="middle">
		<section class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-offset-1 col-sm-10">
					<div class="title">
						<h1>
							We are development experts. We code mobile, internet and desktop apps for your business.
						</h1>
						<p>
							<a href="#" class="btn btn-lg">Discover our work</a>
						</p>
												
					</div>	
				</div>
				<div class="col-xs-12 mid-img">
					<img src="images/home-cover.png" style="width:100%">
				</div>	
			</div>
		</section>
	</div>
	<!-- 头部下面的标题与图片 结束 -->
	<!-- our service -->
	<section class="service">
		<div class="container">
			<!-- h2标题部分 -->
			<div class="row">
				<div class="col-xs-12 col-sm-offset-1 col-sm-10">
					<div class="ser-ti">
						<h1>Our Service</h1>
						<p>We are designers, developers and consultants. We are expert in mobile, internet and desktop applications.</p>
					</div>

				</div>
			</div>
			<!-- h2标题部分 结束 -->
			<!-- 有图标的中间部分 开始 -->
			<div class="row ser-mid">
				<div class="tiles">
					<div class="col-xs-12 col-sm-4">
						<section>
							<div class="tit-img"><img src="images/1.png"></div>							
							<h2>APPLICATIONS</h2>
							<p>We make native mobile apps for iOS (iPhone and iPad) and Android devices.</p>
						</section>
					</div>
					<div class="col-xs-12 col-sm-4">
						<section>
							<div class="tit-img"><img src="images/2.png"></div>
							<h2>WEBSITES</h2>
							<p>We code fast, responsive and light-weight websites tailored to your needs.</p>
						</section>
					</div>
					<div class="col-xs-12 col-sm-4">
						<section>
							<div class="tit-img tit-img3"><img src="images/3.png"></div>
							<h2>CONSULTING</h2>
							<p>We help you to define your needs & requirements, and manage your project seamlessly.</p>
						</section>
					</div>
				</div>
			</div>
			<!-- 有图标的中间部分 结束 -->
			<!-- our service 按钮 -->
			<div class="row">
				<section class="col-xs-12">
					<div class="bon-ser">
						<a href="" class="btn btn-lg">Discover Our Service</a>
					</div>
				</section>
			</div>
		</div>
	</section>
	<!-- our service end -->
	<!-- Our Recent Work start -->
	<section class="recent">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-offset-1 col-sm-10">
					<div class="rec-ti">
						<h1>Our Recent Work</h1>
						<p>Here are some of our latest projects. If you think we could help you, head to the contact page and share some details with us.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="projects">
					<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-md-3">
						<a href="" class="pro-files">
							<div class="pro-img">
								<img src="images/tr1.jpg">
							</div>
							<div class="pro-cont">
								<p>Trust Intl.</p>
								<p class="cont-p">Wordpress Theme</p>
							</div>
						</a>
					</div>
					<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-md-3">
						<a href="" class="pro-files">
							<div class="pro-img">
								<img src="images/tr2.jpg">
							</div>
							<div class="pro-cont">
								<p>Yummygum</p>
								<p class="cont-p">Web Integration</p>
							</div>
						</a>
					</div>
					<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-md-3 hidden-xs">
						<a href="" class="pro-files">
							<div class="pro-img">
								<img src="images/tr3.jpg">
							</div>
							<div class="pro-cont">
								<p>Unithings</p>
								<p class="cont-p">Prestashop Theme</p>
							</div>
						</a>
					</div>
					<div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-md-3 hidden-xs hidden-sm">
						<a href="" class="pro-files">
							<div class="pro-img">
								<img src="images/tr4.jpg">
							</div>
							<div class="pro-cont">
								<p>Epsilan</p>
								<p class="cont-p">Custom Development</p>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="row">
				<section class="col-xs-12">
					<div class="bon-ser">
						<a href="" class="btn btn-lg">Discover Our Projects</a>
					</div>
				</section>
			</div>
		</div>
	</section>
	<!-- Our Recent Work end -->

	<!-- 底部开始 -->
	<footer>
		<div class="container">
			<div class="row">
				<section class="foot-cont">
					<div class="col-xs-12 col-sm-4">
						<h1>From our blog</h1>
						<p><a href="">Pushh is a free iPhone app that helps you keep track of your fitness selfies</a></p>
						<p><a href="">Den Danske Ordbog has hit 90K downloads on the App Store</a></p>
					</div>
					<div class="col-xs-12 col-sm-4">
						<h1>We are social</h1>
						<p><a href="">We tweet, we post shots on Dribbble and updates on Facebook. Be sure to follow us :</a></p>
						<p>
							<a href="" class="iconet firsticon"><i class="icon-twitter icon-1x"></i></a>
							<a href="" class="iconet"><i class="icon-google-plus icon-1x"></i></a>
							<a href="" class="iconet"><i class="icon-facebook icon-1x"></i></a>
						</p>
					</div>
					<div class="col-xs-12 col-sm-4">
						<h1>Contact us</h1>
						<p><a href="">We are available from Monday to Friday from 10AM to 6PM :</a></p>
						<p><a href="" class="touch">GET IN TOUCH</a></p>
					</div>
				</section>
			</div>
			<div class="line"></div>
			<div class="row">
				<div class="col-xs-12 last">
					<p>All right reserved • Dviance 2014 • Made in France</p>
				</div>
			</div>
		</div>
	</footer>
	<!-- 底部结束 -->


</body>
</html>







